<template>
  <div class="mine">
    <van-row class="my-header" type="flex" justify="space-around" align="center">
      <van-col span="4" class="avatar">
        <img class="header-img"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fbb7cce78ede1c13ffb3cf4193d6c95897f328740.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002"
          alt="" />
      </van-col>
      <van-col class="username" span="10"> {{user.userName}} </van-col>
      <van-col span="8">
        <van-button plain type="info" size="mini" @click="edituserinfo">编辑个人信息</van-button>
      </van-col>
    </van-row>
    <div class="my-money">
      <div class="left">
        <p>6.09</p>
        <p>我的余额</p>
      </div>
      <div class="right">
        <p>0</p>
        <p>我的金币</p>
      </div>
    </div>

    <!-- <van-row type="flex"  align="centen" class="row" >

      <van-col span="4" offset="1">学号：</van-col>
      <van-col span="14">{{user.studentId}}</van-col>
    </van-row>

    <van-row type="flex"  class="row" align="center">
    <van-col span="4" offset="1">学校：</van-col>
      <van-col span="14">{{user.school}}</van-col>
    </van-row>

    <van-row type="flex"  class="row" align="center">
      <van-col span="4" offset="1">学院：</van-col>
      <van-col span="14">{{user.college}}</van-col>
    </van-row>

    <van-row type="flex" class="row" align="center">
      <van-col span="4" offset="1">专业：</van-col>
      <van-col span="14">{{user.major}}</van-col>
    </van-row>

    <van-row type="flex" class="row" align="center">
      <van-col span="4" offset="1">电话：</van-col>
      <van-col span="14">{{user.phone}}</van-col>
    </van-row>-->

    <div class="selectbtn" ref="selectbtn" @click="showPage">
      <optionsbtn :optionName="'我的订单'" >
        <svg t="1666150232252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="1752" width="25" height="25">
          <path
            d="M324.266667 136.533333a34.133333 34.133333 0 0 1 2.56 68.181334L324.266667 204.8h-119.466667v682.666667h614.4V204.8h-110.933333a34.133333 34.133333 0 0 1-2.56-68.181333L708.266667 136.533333H819.2a68.266667 68.266667 0 0 1 68.181333 64.853334L887.466667 204.8v682.666667a68.266667 68.266667 0 0 1-64.853334 68.181333L819.2 955.733333H204.8a68.266667 68.266667 0 0 1-68.181333-64.853333L136.533333 887.466667V204.8a68.266667 68.266667 0 0 1 64.853334-68.181333L204.8 136.533333h119.466667z"
            fill="#444444" p-id="1753"></path>
          <path
            d="M631.466667 68.266667H392.533333c-56.405333 0-102.4 45.994667-102.4 102.4s45.994667 102.4 102.4 102.4h238.933334c56.405333 0 102.4-45.994667 102.4-102.4s-45.994667-102.4-102.4-102.4zM392.533333 136.533333h238.933334c18.688 0 34.133333 15.445333 34.133333 34.133334s-15.445333 34.133333-34.133333 34.133333H392.533333c-18.688 0-34.133333-15.445333-34.133333-34.133333s15.445333-34.133333 34.133333-34.133334z"
            fill="#444444" p-id="1754"></path>
          <path
            d="M496.7936 358.4c104.704 0 189.576533 84.872533 189.576533 189.576533 0 40.021333-12.407467 77.141333-33.570133 107.741867l71.0656 71.0656-48.264533 48.2816-71.0656-71.082667a188.706133 188.706133 0 0 1-107.741867 33.570134C392.0896 737.553067 307.2 652.680533 307.2 547.976533 307.2 443.272533 392.0896 358.4 496.7936 358.4z m0 68.266667a121.309867 121.309867 0 1 0-0.017067 242.6368A121.309867 121.309867 0 0 0 496.7936 426.666667z"
            fill="#f4ea2a" p-id="1755" data-spm-anchor-id="a313x.7781069.0.i7" class="selected"></path>
        </svg>
      </optionsbtn>
      <optionsbtn :optionName="'我的收藏'">
        <svg t="1666150330243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2434" width="25" height="25">
          <path
            d="M875.157333 521.386667l74.709334-85.461334c26.090667-29.824 13.866667-67.52-24.768-76.309333L681.728 304.213333l-127.786667-214.677333c-20.288-34.069333-59.946667-34.090667-80.213333 0l-127.786667 214.677333-243.392 55.381334c-38.442667 8.746667-50.837333 46.506667-24.768 76.309333l164.394667 188.053333-22.613333 248.917334c-3.605333 39.466667 28.437333 62.805333 64.874666 47.146666l229.376-98.432-16.810666-39.210666-229.397334 98.453333c-6.698667 2.88-6.229333 3.221333-5.546666-4.096l24.256-267.093333-176.426667-201.813334c-4.757333-5.461333-4.885333-5.034667 2.133333-6.634666l261.205334-59.434667 137.173333-230.4c3.733333-6.293333 3.114667-6.293333 6.869333 0l137.152 230.4 261.205334 59.434667c7.125333 1.621333 6.954667 1.088 2.133333 6.613333l-74.709333 85.482667 32.106666 28.074666z m0 0l74.709334-85.461334c26.090667-29.824 13.866667-67.52-24.768-76.309333L681.728 304.213333l-127.786667-214.677333c-20.288-34.069333-59.946667-34.090667-80.213333 0l-127.786667 214.677333-243.392 55.381334c-38.442667 8.746667-50.837333 46.506667-24.768 76.309333l164.394667 188.053333-22.613333 248.917334c-3.605333 39.466667 28.437333 62.805333 64.874666 47.146666l229.376-98.432-16.810666-39.210666-229.397334 98.453333c-6.698667 2.88-6.229333 3.221333-5.546666-4.096l24.256-267.093333-176.426667-201.813334c-4.757333-5.461333-4.885333-5.034667 2.133333-6.634666l261.205334-59.434667 137.173333-230.4c3.733333-6.293333 3.114667-6.293333 6.869333 0l137.152 230.4 261.205334 59.434667c7.125333 1.621333 6.954667 1.088 2.133333 6.613333l-74.709333 85.482667 32.106666 28.074666z"
            fill="#3D3D3D" p-id="2435"></path>
          <path
            d="M682.666667 917.333333a192 192 0 1 0 0-384 192 192 0 0 0 0 384z m0 42.666667c-129.6 0-234.666667-105.066667-234.666667-234.666667s105.066667-234.666667 234.666667-234.666666 234.666667 105.066667 234.666666 234.666666-105.066667 234.666667-234.666666 234.666667z"
            fill="#f4ea2a" p-id="2436" data-spm-anchor-id="a313x.7781069.0.i19" class="selected"></path>
          <path
            d="M769.429333 646.122667a21.333333 21.333333 0 0 1 29.930667 30.421333l-143.978667 141.653333a21.333333 21.333333 0 0 1-30.037333-0.106666l-64.426667-64.426667a21.333333 21.333333 0 0 1 30.165334-30.186667l49.472 49.472 128.853333-126.826666z"
            fill="#f4ea2a" p-id="2437" data-spm-anchor-id="a313x.7781069.0.i20" class="selected"></path>
        </svg>
      </optionsbtn>
      <optionsbtn :optionName="'用户协议'">
        <svg t="1666150265905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2000" data-spm-anchor-id="a313x.7781069.0.i12" width="25" height="25">
          <path
            d="M626.076 925.825H251.938c-49.626 0-90-40.374-90-90v-647.65c0-49.626 40.374-90 90-90h520.124c49.626 0 90 40.374 90 90v503.38c0 15.905-6.481 31.444-17.782 42.635L668.294 908.458c-11.31 11.199-26.303 17.367-42.218 17.367z m0-60v30-30z m-374.138-707.65c-16.542 0-30 13.458-30 30v647.65c0 16.542 13.458 30 30 30h374.138l175.987-174.27-0.001-503.38c0-16.542-13.458-30-30-30H251.938z"
            fill="#2c2c2c" p-id="2001"></path>
          <path
            d="M598.05 831.906c-16.569 0-30-13.431-30-30v-140c0-16.569 13.431-30 30-30 16.569 0 30 13.431 30 30v140c0 16.568-13.431 30-30 30z"
            fill="#2c2c2c" p-id="2002"></path>
          <path
            d="M568.05 661.906c0-16.569 13.431-30 30-30h140c16.569 0 30 13.431 30 30 0 16.569-13.431 30-30 30h-140c-16.568 0-30-13.432-30-30z"
            fill="#2c2c2c" p-id="2003"></path>
          <path
            d="M654.866 293.185H371.077c-15.522 0-28.106-12.583-28.106-28.106v-3.789c0-15.522 12.583-28.106 28.106-28.106h283.789c15.522 0 28.106 12.583 28.106 28.106v3.789c-0.001 15.523-12.584 28.106-28.106 28.106zM654.866 420.12H371.077c-15.522 0-28.106-12.583-28.106-28.106v-3.789c0-15.522 12.583-28.106 28.106-28.106h283.789c15.522 0 28.106 12.583 28.106 28.106v3.789c-0.001 15.523-12.584 28.106-28.106 28.106z"
            fill="#f4ea2a" p-id="2004" data-spm-anchor-id="a313x.7781069.0.i14" class="selected"></path>
          <path
            d="M654.866 547.055H371.077c-15.522 0-28.106-12.583-28.106-28.106v-3.789c0-15.522 12.583-28.106 28.106-28.106h283.789c15.522 0 28.106 12.583 28.106 28.106v3.789c-0.001 15.523-12.584 28.106-28.106 28.106z"
            fill="#f4ea2a" p-id="2005" data-spm-anchor-id="a313x.7781069.0.i13" class="selected"></path>
        </svg>
      </optionsbtn>
      <optionsbtn :optionName="'隐私协议'">
        <svg t="1666150357213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2682" data-spm-anchor-id="a313x.7781069.0.i25" width="25" height="25">
          <path
            d="M569.99936 336.44544a43.78624 43.78624 0 0 1 0 61.89056l-63.488 63.52896h226.34496a135.9872 135.9872 0 1 1 0 87.57248h-226.38592l63.52896 63.488a43.78624 43.78624 0 0 1-61.89056 61.8496l-138.19904-138.15808a43.66336 43.66336 0 0 1 0.32768-62.34112l137.87136-137.8304a43.78624 43.78624 0 0 1 61.89056 0z m243.22048 169.1648a48.41472 48.41472 0 1 0 96.74752 3.52256 48.41472 48.41472 0 0 0-96.74752-3.4816z"
            fill="#f4ea2a" p-id="2683" data-spm-anchor-id="a313x.7781069.0.i26" class="selected"></path>
          <path
            d="M20.52096 505.6512a504.54528 504.54528 0 0 1 857.7024-360.32512l-28.38528 28.95872 28.42624-28.95872c25.6 25.10848 48.45568 52.8384 68.1984 82.78016a43.78624 43.78624 0 0 1-73.03168 48.16896c-16.384-24.73984-35.26656-47.67744-56.48384-68.4032l30.67904-31.29344-30.67904 31.29344C653.312 47.43168 390.79936 49.152 229.25312 211.7632c-161.54624 162.6112-161.54624 425.08288 0 587.69408 161.54624 162.6112 424.01792 164.37248 587.69408 3.93216l30.67904 31.29344-30.67904-31.29344c21.13536-20.6848 40.09984-43.6224 56.48384-68.48512a43.78624 43.78624 0 1 1 73.1136 48.25088A504.54528 504.54528 0 0 1 20.48 505.6512z"
            fill="#2B2F36" p-id="2684"></path>
        </svg>
      </optionsbtn>
      <optionsbtn :optionName="'商务合作'">
        <svg t="1666150472124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="1322" data-spm-anchor-id="a313x.7781069.0.i0" width="25" height="25">
          <path
            d="M896 483.626667a42.666667 42.666667 0 0 0 42.666667-42.666667v-59.306667a90.88 90.88 0 0 0-1.706667-17.066666 97.493333 97.493333 0 0 0-5.12-15.786667 106.666667 106.666667 0 0 0-8.106667-14.293333 112.426667 112.426667 0 0 0-10.453333-12.16 95.146667 95.146667 0 0 0-26.88-17.493334 85.333333 85.333333 0 0 0-15.573333-4.48A88.106667 88.106667 0 0 0 853.333333 298.666667h-85.333333V146.986667A61.866667 61.866667 0 0 0 706.346667 85.333333H317.653333A61.866667 61.866667 0 0 0 256 146.986667V298.666667H170.666667a84.053333 84.053333 0 0 0-16.426667 1.706666 75.733333 75.733333 0 0 0-16 4.693334 83.2 83.2 0 0 0-14.293333 7.466666 92.586667 92.586667 0 0 0-12.586667 10.026667 96.213333 96.213333 0 0 0-10.24 12.16 76.373333 76.373333 0 0 0-7.893333 14.08 80.853333 80.853333 0 0 0-5.333334 15.786667 90.88 90.88 0 0 0-1.706666 17.066666v474.026667a90.88 90.88 0 0 0 1.706666 17.066667 97.493333 97.493333 0 0 0 5.12 15.786666 106.666667 106.666667 0 0 0 8.106667 14.293334 112.426667 112.426667 0 0 0 10.453333 12.16 82.56 82.56 0 0 0 12.586667 9.813333 83.413333 83.413333 0 0 0 14.293333 7.68 85.333333 85.333333 0 0 0 15.573334 4.48A88.106667 88.106667 0 0 0 170.666667 938.666667h682.666666a84.053333 84.053333 0 0 0 16.426667-1.706667 75.733333 75.733333 0 0 0 16-4.693333 83.2 83.2 0 0 0 14.293333-7.466667 92.586667 92.586667 0 0 0 12.586667-10.026667 96.213333 96.213333 0 0 0 10.24-12.16 76.373333 76.373333 0 0 0 7.893333-14.08 80.853333 80.853333 0 0 0 5.333334-15.786666 90.88 90.88 0 0 0 1.706666-17.066667V618.666667a42.666667 42.666667 0 0 0-85.333333 0v234.666666H170.666667V384h682.666666v57.173333a42.666667 42.666667 0 0 0 42.666667 42.453334zM341.333333 170.666667h341.333334v128H341.333333z"
            fill="#333333" p-id="1323"></path>
          <path
            d="M298.666667 576a42.666667 42.666667 0 0 0 0 85.333333h426.666666a42.666667 42.666667 0 0 0 0-85.333333z"
            fill="#f4ea2a" p-id="1324" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path>
        </svg>
      </optionsbtn>
      <optionsbtn :optionName="'设置'">
        <svg t="1666150406725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3143" width="25" height="25">
          <path
            d="M510.37806 337.803609c-98.010221 0-177.748287 78.842673-177.748287 175.75284 0 96.91426 79.738066 175.763073 177.748287 175.763073 9.537214 0 19.620873-0.978281 31.797194-3.088338 18.196431-3.281743 30.290887-20.538779 26.963095-38.471197-2.924609-15.732309-16.693194-27.152407-32.747845-27.152407-2.071172 0-4.15974 0.196475-6.123464 0.563842-7.937786 1.402953-14.233166 2.056845-19.807115 2.056845-61.159942 0-110.915136-49.201585-110.915136-109.671819 0-60.467163 49.679469-109.661585 110.747313-109.661585 61.116963 0 110.832248 49.194422 110.832248 109.661585 0 5.892197-0.656963 12.0832-2.088568 19.531845-3.327792 17.928325 8.769734 35.189454 26.959002 38.464033 2.006703 0.360204 4.045129 0.546446 6.070252 0.546446 16.204054 0 30.019711-11.43033 32.832779-27.116591 2.13871-11.45182 3.13848-21.435195 3.13848-31.41857 0.042979-46.873564-18.435884-90.990341-52.033074-124.223233C602.407056 356.106464 557.790906 337.803609 510.37806 337.803609z"
            p-id="3144" data-spm-anchor-id="a313x.7781069.0.i35" class="selected" fill="#f4ea2a"></path>
          <path
            d="M938.476161 432.79917c-2.185782-11.426237-11.037381-20.499893-22.563902-23.12058-41.909505-9.508561-76.781734-34.929534-98.185206-71.550593-21.334911-36.560684-26.191522-79.099523-13.68979-119.709429 3.52836-11.123338 0.007163-23.235191-8.951883-30.840402-41.860387-35.721573-89.536222-62.938448-141.695163-80.885192-3.152806-1.088798-6.437619-1.639337-9.776667-1.639337-8.256034 0-16.182564 3.431146-21.724791 9.376555-29.236881 31.04404-68.840878 48.140417-111.5107 48.140417-42.673915 0-82.305541-17.125029-111.607914-48.230468-7.877411-8.333806-20.510126-11.512195-31.580253-7.726985-52.483328 18.171871-100.131535 45.416376-141.640927 80.988546-8.815783 7.591909-12.322653 19.620873-8.934486 30.67258 12.586666 40.645722 7.759731 83.180468-13.597693 119.78106-21.306258 36.5965-56.149834 62.006216-98.17395 71.561849-11.540847 2.709715-20.396539 11.812023-22.559808 23.166629-5.228071 27.169803-7.877411 54.346769-7.877411 80.770582 0 26.426883 2.64934 53.603849 7.873318 80.763418 2.174526 11.411911 11.023054 20.488637 22.552645 23.12058 41.913599 9.512654 76.785827 34.922371 98.19237 71.547523 21.349237 36.59343 26.177196 79.128175 13.583366 119.795387-3.363607 10.969842 0.121773 23.013133 8.973372 30.758538 41.84913 35.707246 89.494267 62.920028 141.662417 80.902588 11.466146 3.885494 23.738657 0.549515 31.454386-7.680936 29.29828-31.091112 68.925812-48.216141 111.593588-48.216141s82.302471 17.125029 111.560842 48.183396c5.556553 5.955642 13.494339 9.380648 21.782096 9.380648 3.27765 0 6.537903-0.520863 9.829879-1.599428 52.126194-17.968234 99.774401-45.184085 141.652184-80.912821 8.791224-7.577582 12.308327-19.628036 8.94165-30.758538-12.597923-40.678468-7.745405-83.20605 13.672394-119.773897 21.324678-36.625152 56.192813-62.030775 98.19237-71.547523 11.390421-2.592035 20.23588-11.633968 22.549575-23.106254 5.223978-27.184129 7.870248-54.358025 7.870248-80.770582C946.342316 487.171522 943.697069 459.965903 938.476161 432.79917zM728.572524 789.878798c-26.02677 20.157085-54.736649 36.553521-85.487 48.818869-36.682457-32.144094-83.60207-49.779753-132.792399-49.779753-48.926316 0-95.838765 17.635659-132.767839 49.786916-30.744211-12.262278-59.45716-28.655643-85.491093-48.812729 9.894348-47.441499 1.889023-96.449679-22.763446-138.627291-24.448832-41.966811-63.427588-73.339332-110.186542-88.840374-2.381234-16.343223-3.584642-32.758078-3.584642-48.869011 0-16.043395 1.203408-32.451086 3.584642-48.851615 46.612621-15.389502 85.584214-46.758953 110.186542-88.850607 24.523533-42.024116 32.525788-91.033319 22.74912-138.620128 26.0237-20.149922 54.735625-36.543288 85.494163-48.815799 36.821627 32.201399 83.73817 49.861618 132.778072 49.861618 49.194422 0 96.109941-17.635659 132.792399-49.779753 30.751375 12.269441 59.45716 28.662807 85.48086 48.812729-9.809413 47.63388-1.835811 96.634898 22.667256 138.620128 24.445762 41.966811 63.416332 73.343425 110.182448 88.850607 2.381234 16.386202 3.584642 32.801057 3.584642 48.940642 0.143263 15.443737-1.031493 31.797194-3.499707 48.701189-46.763047 15.504112-85.73771 46.873564-110.186542 88.836281C726.84416 693.189665 718.845998 742.190683 728.572524 789.878798z"
            p-id="3145"></path>
        </svg>
      </optionsbtn>
    </div>
    
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <editinfoVue @close="editclose"></editinfoVue>
    </van-popup> 
  </div>
</template>

<script>
import editinfoVue from '@/components/editinfo.vue';
import { mapState } from 'vuex';
import optionsbtn from '../../components/optionsbutton.vue'
export default {
  components: {
    editinfoVue,
    optionsbtn
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    edituserinfo() {
      this.show = true
    },
    editclose(e) {
      this.show = e
    },
    showPage(e){
      // console.log(this.$refs.selectbtn);
      // console.log(e.target.innerText);
      let key = e.target.innerText
      switch (key) {
        case  '我的订单':this.$router.push('/home/mine/Myorder')
          break;
          case  '我的收藏':this.$router.push('/home/mine/collection')
        default:
          break;
      }
    }
  },
  computed: {
    ...mapState(['user'])
  }
};
</script>

<style lang="less" scoped>
.mine {
  // padding: 20px;
  background: rgb(243, 241, 222);
  height: calc(100vh - 50px);

  .avatar {

    overflow: hidden;

    .header-img {
      width: 100%;
      border-radius: 50%;
    }
  }

  .my-header {
    padding: 0px 20px 40px 20px;
    height: 22vh;
    background: rgb(255, 235, 51);
  }

  .username {
    font-size: 26px;
  }

  .my-money {
    background: #000;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    text-align: center;
    line-height: 20px;
    margin: -70px 15px 0 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .selectbtn {
    padding: 10px 15px;
    overflow: hidden;
    border-radius: 15%;
  }
}

.text-left {
  text-align: left;
}
</style>